* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}

.hideback {
    width: 100%;
    height: 100%;
}

.header {
    /* overflow: hidden; */
    position: relative;
    top: -100px;
}

.head {
    height: 200px;
    background-color: #f65646;
    border-radius: 0 0 50% 50%;
    border: 3px solid #f9c675;

}

.body {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 3%;
    left: 32%;
    transform: translate(0, -50%);
}

.body ul {
    width: 200px;
    height: 100px;
    list-style: none;
    float: left;
}

.username {
    width: 100px;
    /* height: 100px; */
    color: #151515;
    margin: auto;
    font-weight: 900;
    font-size: larger;
}

.jixiang {
    width: 150px;
    height: 50px;
    margin: 0 auto;
    font-weight: 900;
    font-size: small;
    color: #b5b5b5;
    text-align: center;
}

.body {
    /* width: 400px; */
    height: 200px;
    position: relative;
}

.body .money {
    color: #cdaa72;
}

.body .num {
    font-size: 50px;
    position: relative;
}

.body .yuan {
    position: absolute;
    top: 54%;
    right: -17%;
}

.body .lingqian {
    width: 200px;
}

.foot {
    position: relative;
    top: -18%;
}

.foot ul {
    width: 90%;
    height: 51%;
    position: relative;
    top: 10%;
    list-style: none;
}

.foot li {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid;
    position: relative;
    left: 10px;
    border-bottom: 3px solid #fafafa;
}


.foot li:nth-child(1) {
    /* top: 10%; */
    bottom: -50px;
}

.foot li:nth-child(2) {
    /* top: 10%; */
    bottom: -56px;
}

.foot li:nth-child(3) {
    /* top: 10%; */
    bottom: -70px;

}

.foot .left img {
    width: 50px;
    height: 50px;
    /* padding-bottom: 10000px; */
}

.foot li:nth-child(1) .left {
    /* padding: 40px 0 20px 30px; */
}

.foot li .left .date {
    padding-top: 5px;
    padding-left: 5px;
    font-size: 14px;
    color: #b5b5b5;

}

.foot li .left img,
.foot li .left div {
    float: left;
}

.foot li .right {
    float: right;
}

/* 红包整体 */

.all {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 背景 */
.redmoney {
    width: 100%;
    height: 100%;
}

/* 兔子 */
/* .tuzi {
    position: absolute;
    width: 0%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.tuzi {
    position: absolute;
    width: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: anime 0.51s linear forwards
}

/* 兔子变大的动画效果 */
@keyframes anime {
    0% {
        width: 0;
    }

    100% {
        width: 80%;
    }
}

/* 领取红包 */
.click {
    position: absolute;
    width: 30%;
    top: 75%;
    left: 35%;
}

.click2 {
    position: absolute;
    width: 30%;
    top: 75%;
    left: 35%;
    animation: click 1s linear;
}

/*  */

/* 红包点击的动画 */
@keyframes click {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}